<template>
  <div class="components-container">
    <el-dialog
      :visible.sync="addDataDialog"
      :width="dialogWidth"
      :fullscreen="dialogfullscreen"
      :show-close="false"
      :top="dialogTop"
    >
      <div slot="title">
        <div style="float:left;">增加数据</div>
        <div style="float:right;">
          <el-tooltip v-if="dialogTopisbig" class="item" effect="dark" content="缩小一下" placement="top-start">
            <i class="el-icon-zoom-out dialog_icon_pointer" @click="reduceDialog" />
          </el-tooltip>
          <el-tooltip v-if="!dialogTopisbig" class="item" effect="dark" content="大一点的展示" placement="top-start">
            <i class="el-icon-zoom-in dialog_icon_pointer" @click="extendDialog" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出" placement="top-start">
            <i class="el-icon-close dialog_icon_pointer" @click="addDataDialog=false;" />
          </el-tooltip>
        </div>
      </div>
      <div>
        <el-form ref="form" :model="newData" label-width="80px">
          <el-form-item label="字段名">
            <el-input v-model="newData.columnName773861861065" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="字段名">
            <el-input v-model="newData.columnName440418553327" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="字段名">
            <el-input v-model="newData.columnName231480980807" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="addnewData">增 加</el-button>
      </div>
    </el-dialog>
    <el-card>
      <div slot="header" class="clearfix">
        <span>QBootTable</span>
      </div>
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-input type="search" placeholder="试试全表搜索" />
          <vxe-button status="perfect" @click="addDataDialog = true"><i class="el-icon-plus" />增加数据</vxe-button>
          <vxe-button status="perfect" @click="isDesc=!isDesc"><i class="el-icon-sort" />{{ isDesc?'倒序':'正序' }}</vxe-button>
          <vxe-button status="perfect" @click="getList">刷新</vxe-button>
        </template>

      </vxe-toolbar>
      <vxe-table
        ref="xGrid"
        border
        resizable
        show-overflow
        :align="allAlign"
        :data="tableData"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: false}"
        @edit-actived="editActived"
      >
        <vxe-column title="id" field="id" width="60" />
        <vxe-column title="字段名" field="columnName773861861065" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnName773861861065" type="text" placeholder="请输入字段" />
          </template>
        </vxe-column>
        <vxe-column title="字段名" field="columnName231480980807" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnName231480980807" type="text" placeholder="请输入字段" />
          </template>
        </vxe-column>
        <vxe-column title="字段名" field="columnName440418553327" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnName440418553327" type="text" placeholder="请输入字段" />
          </template>
        </vxe-column>
        <vxe-column title="操作" :fixed="'right'" width="200">
          <template #default="{row}">
            <el-tooltip v-if="$refs.xGrid.isActiveByRow(row)" class="item" effect="dark" content="保存" placement="top-start">
              <el-button type="primary" size="mini" icon="el-icon-upload" circle @click="saveQBootTable(row);cancelRowEvent(row)" />
            </el-tooltip>
            <el-tooltip v-if="$refs.xGrid.isActiveByRow(row)" class="item" effect="dark" content="取消" placement="top-start">
              <el-button type="warning" size="mini" icon="el-icon-error" circle @click="cancelRowEvent(row)" />
            </el-tooltip>
            <el-tooltip v-else class="item" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="editRowEvent(row)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeColumn(row)" />
            </el-tooltip>
          </template>
        </vxe-column></vxe-table>
      <vxe-pager
        :loading="loading"
        :current-page="pageInfo.page"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange"
      />
    </el-card>
  </div>
</template>
<script>
/**
 * api接口导入
 */
import {
  getAllQBootTables,
  getQBootTableById,
  getQBootTablesByPage,
  getQBootTablesByPageDesc,
  saveQBootTable,
  saveQBootTables,
  deleteQBootTableById,
  deleteQBootTable } from '@/api/demo.js'
export default {
  data() {
    return {
      // 表格对齐方式
      allAlign: null,
      // 分页数据顺序是否倒序
      isDesc: true,
      // 新增数据
      newData: {
        columnName773861861065: '',
        columnName231480980807: '',
        columnName440418553327: ''
      },
      // 分页数据
      tableData: [],
      // 加载状态
      loading: false,
      // 弹窗是否显示
      addDataDialog: false,
      // 弹窗是否覆盖屏幕
      dialogfullscreen: false,
      // 弹窗宽度
      dialogWidth: '45%',
      // 弹窗距顶端高度
      dialogTop: '15vh',
      rowTemp: null,
      dialogTopisbig: false,
      pageInfo: {
        page: 1,
        pageSize: 7,
        totalResult: 0
      }
    }
  },
  watch: {
    isDesc(to, from) {
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getAllList() {
      getAllQBootTables
    },
    getList() {
      this.loading = true
      if (this.isDesc) {
        getQBootTablesByPageDesc(this.pageInfo.page - 1, this.pageInfo.pageSize).then(res => {
          this.tableData = res.data.content
          this.pageInfo.totalResult = res.data.totalElements
          this.loading = false
        })
      } else {
        getQBootTablesByPage(this.pageInfo.page - 1, this.pageInfo.pageSize).then(res => {
          this.tableData = res.data.content
          this.pageInfo.totalResult = res.data.totalElements
          this.loading = false
        })
      }
    },
    insertEvent() {
      const $table = this.$refs.xGrid
      $table.insert().then(({ row }) => {
        $table.setActiveCell(row, 'ColumnName773861861065')
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.page = currentPage
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    removeColumn(row) {
      deleteQBootTableById(row.id).then(res => {
        this.$message({ message: '删除成功', type: 'success' })
        this.$refs.xGrid.remove(row)
      }).catch(() => {
        this.$message({ message: '删除失败', type: 'warning' })
      })
    },
    getQBootTableById(id) {
      getQBootTableById(id).then(res => {
        console.log(res.data)
      })
    },
    saveQBootTable(row) {
      if (this.rowTemp != null) {
        this.rowTemp = null
        saveQBootTable(row).then(res => {
          this.$message({ message: '保存成功', type: 'success' })
        }).catch(() => {
          this.$message({ message: '保存失败', type: 'warning' })
        })
      } else {
        saveQBootTable(row).then(res => {
          this.$message({ message: '保存成功', type: 'success' })
          this.$refs.xGrid.clearActived()
        }).catch(() => {
          this.$message({ message: '保存失败', type: 'warning' })
        })
      }
    },
    saveQBootTables(rows) {
      saveQBootTables(rows).then(res => {
        this.$message({ message: '保存成功', type: 'success' })
      }).catch(() => {
        this.$message({ message: '保存失败', type: 'warning' })
      })
    },
    deleteQBootTable(row) {
      deleteQBootTable(row).then(res => {
        this.$message({ message: '删除成功', type: 'success' })
        this.getList()
      }).catch(() => {
        this.$message({ message: '删除失败', type: 'warning' })
        this.getList()
      })
    },
    addnewData() {
      saveQBootTable(this.newData).then(res => {
        this.$message({ message: '保存成功', type: 'success' })
        this.getList()
        this.addDataDialog = false
      }).catch(() => {
        this.$message({ message: '保存失败', type: 'warning' })
        this.getList()
        this.addDataDialog = false
      })
    },
    editRowEvent(row) {
      const $table = this.$refs.xGrid
      $table.setActiveRow(row)
    },
    saveRowEvent() {
      const $table = this.$refs.xGrid
      $table.clearActived().then(() => {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.$message({ message: '保存成功！', type: 'success' })
        }, 300)
      })
    },
    cancelRowEvent(row) {
      const $table = this.$refs.xGrid
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row)
      })
      this.rowTemp = null
      this.getList()
    },
    extendDialog() {
      this.editor_width = '100%'
      this.editor_height = '700'
      this.dialogWidth = '70%'
      this.dialogTop = '5vh'
      this.dialogTopisbig = true
    },
    reduceDialog() {
      this.editor_width = '100%'
      this.editor_height = '600'
      this.dialogWidth = '45%'
      this.dialogTop = '15vh'
      this.dialogTopisbig = false
    },
    editActived(row) {
      if (this.rowTemp == null) {
        this.rowTemp = row.row
      } else {
        this.saveQBootTable(this.rowTemp)
        this.rowTemp = row.row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog_icon_pointer{
  margin-right: 10px;
  &:hover{
    cursor: pointer;
  }
}
</style>
